<template>
    <div>
        <div style="margin-bottom: 15px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">人员管理</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="padding: 10px 0;text-align: left">
            <el-input clearable class="ml5" v-model="username" placeholder="请输入姓名"
                      prefix-icon="el-icon-search" style="width: 200px;"></el-input>
            <el-input clearable class="ml5" v-model="email" placeholder="请输入邮箱"
                      prefix-icon="el-icon-message" style="width: 200px;"></el-input>
            <el-input clearable class="ml5" v-model="address" placeholder="请输入地址"
                      prefix-icon="el-icon-position" style="width: 200px;"></el-input>
            <el-button style="margin-left: 5px;" type="primary" @click="load">查询</el-button>
            <el-button style="margin-left: 5px;" type="warning" @click="reset">重置</el-button>
        </div>

        <div style="text-align: left;padding-bottom:10px;">
            <el-button type="primary" class="ml5">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="danger" class="ml5">删除 <i class="el-icon-remove-outline"></i></el-button>
            <el-button type="primary" class="ml5">导入 <i class="el-icon-bottom"></i></el-button>
            <el-button type="primary" class="ml5">导出 <i class="el-icon-top"></i></el-button>
        </div>
        <el-table :data="tableData" border stript>
            <el-table-column prop="id" label="id" width="60"></el-table-column>
            <el-table-column prop="username" label="用户名" width="140">
            </el-table-column>
            <el-table-column prop="nickname" label="岗位" width="120">
            </el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <!--eslint-disable-next-line-->
                <template slot-scope="scope">
                    <el-button type="primary" @click="editDialog">编辑</el-button>
                    <el-button type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px">

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserManage",

        data() {
            return {
                tableData: [{
                    address:"上海浦东新区",
                    caeateTime:"2023-04-08T12:03:46.000+00:00",
                    email:"admin@qq.com",
                    id:1,
                    phone:"123456",
                    position:"管理员",
                    username:"admin",
                }
                ],
                total: 0,
                pageNum: 1,
                pageSize: 5,

                logotextshow: true,

                search_name: '',
                search_email: '',
                search_loc: '',

                username: "",
                email: "",
                address: "",

                editDialogFormVisible: false,
                formLabelWidth: 500,
            }
        },
        created() {
            this.load()
        },
        methods: {
            editDialog() {
                if (this.editDialogFormVisible === false) {
                    this.editDialogFormVisible = true
                } else {
                    this.editDialogFormVisible = false
                }
            },
            load() {
                this.request.get("http://localhost:8080/sanda/user/pageM", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        username: this.username,
                        email: this.email,
                        address: this.address,
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.records
                    this.total = res.total
                    console.log("1111111111")
                })
            },
            reset() {
                this.username = ""
                this.email = ""
                this.address = ""
                this.load()
            },
            getPage() {
                this.request.get("http://localhost:8080/sanda/user/pageM", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.records
                    this.total = res.total
                })
                //   getPageInfo().then(res=>{
                //       this.tableData = res.data
                //       this.total = res.total
                //   })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getPage()
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
                this.getPage()
            },

        }
    }
</script>

<style scoped>

</style>
